後端幼幼班Day16 Flask篇前端渲染

2022 iThome 鐵人賽

DAY 16

Modern Web

Willisの後端幼幼班系列第 16 篇

14th鐵人賽

Willis

團隊imac_Big3

2022-10-01 09:37:13

755 瀏覽

分享至

哈囉大家好 ~ 我是Willis，今天要介紹Flask的前端渲染喔 ! ε٩(๑> ₃ <)۶з

HTML渲染

`render_template()`

templates資料夾

我們需要先創建templates資料夾，方便render_template()這個function能在資料夾中找到HTML檔進行呼叫。
填寫一個HTML檔的網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

程式碼 app.py

from flask import Flask, render_template  # 導入模組Flask, render_template

app = Flask(__name__)
app.config["DEBUG"] = True


@app.route("/index")
def index():
    return render_template('index.html')  # 回傳在template資料夾中的HTML檔


if __name__ == "__main__":
    app.run()

執行結果

傳送參數

學習了render_template()，我們還可以使用它來跟網頁傳送一些參數。

網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h1>Hello {{ username }}</h1>
</body>
</html>

{{ }}是一種jinja2的語法，Python才能讀懂，HTML無法讀懂它的語法

程式碼 app.py

from flask import Flask, render_template

app = Flask(__name__)
app.config["DEBUG"] = True


@app.route("/index")
def index():
    return render_template('index.html', username='Willis') # 傳送 username='Willis'


if __name__ == "__main__":
    app.run()

執行結果

使用route傳送參數

除了在Server傳送參數外，我們還能用route來傳送參數。

網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h1>Hello {{ username }}</h1>
</body>
</html>

程式碼 app.py

from flask import Flask, render_template

app = Flask(__name__)
app.config["DEBUG"] = True


@app.route("/<user>")  # 新增一個自訂user的路徑
def index(user):
    return render_template('index.html', username=user)  # 傳送自訂的username


if __name__ == "__main__":
    app.run()